<template>
  <section class="box">
    <div class="user-info">
      <div class="avatar">
        <img :src="this.$baseUrl+info.avatar" alt="avatar" style="border-radius: 50%">
        <input type="file" accept="image/*" @change="uploadAvatar($event)">
      </div>
      <div class="username">{{info.nickname}}</div>
      <div class="tip">{{$t('welcome')}}</div>
    </div>
    <div class="count">
      <grid :show-lr-borders=false>
        <grid-item :link="{path:'/CNY'}">
          <p slot="label" class="money" >{{info.cny}}</p>
          <p class="title">CNY</p>
        </grid-item>
        <grid-item :link="{path:'/SAC'}">
          <p slot="label" class="money" >{{info.sac}}</p>
          <p class="title">SAC</p>
        </grid-item>
      </grid>
    </div>
    <section class="menu">
      <group class="m-t-em">
        <cell :title="$t('account manage')" is-link link="/personalInfo">
          <span slot="icon" class="icon-personal"><img src="../../assets/img/zhanghu.png" alt=""></span>
        </cell>
        <!--<cell :title="$t('contact service')" is-link link="/servicecenter">-->
          <!--&lt;!&ndash;<div slot="title" class="test">联系客服</div>&ndash;&gt;-->
          <!--<span slot="icon" class="icon-personal"><img src="../../assets/img/kefu.png" alt=""></span>-->
        <!--</cell>-->
        <cell :title="$t('about us')" is-link link="/aboutus">
          <span slot="icon" class="icon-personal"><img src="../../assets/img/guanyu.png" alt=""></span>
        </cell>
        <cell :title="$t('my team')" is-link link="/myteam">
          <span slot="icon" class="icon-personal"><img src="../../assets/img/tuandui.png" alt=""></span>
        </cell>
        <!--<cell :title="$t('trading record')" is-link link="/tradelist">-->
          <!--<span slot="icon" class="icon-personal"><img src="../../assets/img/jiaoyi.png" alt=""></span>-->
        <!--</cell>-->
        <cell :title="$t('cashLog')" is-link link="/cashlog">
          <span slot="icon" class="icon-personal"><img src="../../assets/img/jiaoyi.png" alt=""></span>
        </cell>
      </group>
    </section>
    <div class="btn-bg">
      <button class="per-exit" @click="doLogin">{{$t('login out')}}</button>
    </div>
  </section>
</template>

<i18n>
    welcome:
      en: Welcome To SAC
      zh-CN: 欢迎来到 SAC
    account manage:
      en: Account Manage
      zh-CN: 账户管理
    contact service:
      en: Contact Service
      zh-CN: 联系客服
    about us:
      en: About Us
      zh-CN: 关于我们
    my team:
      en: My Team
      zh-CN: 我的团队
    trading record:
      en: Trading Record
      zh-CN: 交易记录
    login out:
      en: Login Out
      zh-CN: 退出
    success:
      en: success
      zh-CN: 上传成功
    error:
      en: error
      zh-CN: 上传失败
</i18n>

<script>
  import { Grid, GridItem, Group, Cell } from 'vux'
  export default {
    name: 'personal',
    components: {
      Grid, GridItem, Group, Cell
    },
    data () {
      return {
        info: ''
      }
    },
    created () {
      this.init()
    },
    methods: {
      init () {
        this.getInfo()
      },
      doLogin () {
        localStorage.token = ''
        localStorage.Haslogin = ''
        this.$router.push({path: '/'})
      },
      getInfo () {
        let vue = this
        let url = 'api/usercenter/index'
        vue.get({
          url: url,
          params: {
            token: localStorage.token
          },
          success: function (data) {
            console.log(data)
            if (data.code === 1) {
              vue.info = data.data
            }
          }
        })
      },
      uploadAvatar (e) {
        let file = e.target.files[0]
        let form = new FormData()
        console.log(e.target.files[0])
        form.append('file', file)
        form.append('token', localStorage.token)
        console.log(localStorage.token)
        this.$http.post('/api/common/upload', form, {'Content-Type': 'multipart/form-data'})
          .then(({data}) => {
            console.log(data)
            if (data.code === 0) {
              this.$vux.toast.show({
                text: `上传失败`,
                type: 'text'
              })
            } else if (data.code === 1) {
              let url = data.data.url
              this.changeAvatar(url)
            }
          })
      },
      changeAvatar (avatarUrl) {
        let vue = this
        this.post({
          url: `/api/account/change_avatar`,
          params: {
            avatar: avatarUrl,
            token: localStorage.token
          },
          success: function (data) {
            console.log(data)
            if (data.code === 0) {
              vue.$vux.toast.show({
                text: `上传失败`,
                type: 'text'
              })
            } else if (data.code === 1) {
              // vue.info.avatar = data.data.avatar
              vue.info.avatar = avatarUrl
              // console.log(vue.info.avatar)
              // getInfo()
              vue.$vux.toast.show({
                text: `修改成功`
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .box{
    background: #fafafa;
    .user-info {
      display: flex;
      flex-direction: column;
      /*background: -webkit-linear-gradient(left, #9cb1c4 , #809fbb); !* Safari 5.1 - 6.0 *!*/
      /*background: -o-linear-gradient(right,  #9cb1c4, #809fbb); !* Opera 11.1 - 12.0 *!*/
      /*background: -moz-linear-gradient(right,  #9cb1c4, #809fbb); !* Firefox 3.6 - 15 *!*/
      /*background: linear-gradient(to right,  #9cb1c4 , #809fbb); !* 标准的语法 *!*/
      /*padding: 15px 15px 50px;*/
      padding-bottom: 15px;
      align-items: center;
      color: #fff;
      background-image: url("../../assets/img/per-bg.png");
      background-position: center;
      background-size: cover;
      width: 100%;
      height: 4.16rem;
      .avatar {
        position: relative;
        width: 75px;
        height: 75px;
        line-height: 1;
        font-size: 0;
        margin-right: 10px;
        margin-top: 30px;
        img {
          width: 75px;
          height: 75px;
        }
        input{
          position: absolute;
          top: 0px;
          left: 0px;
          opacity: 0;
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }
      .username{
        margin: 5px 0;
        font-size: 0.28rem;
      }
      .tip{
        border: 1px solid #fffc07;
        color: #fffc07;
        background: #537fbf;
        text-align: center;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 0.22rem;
      }

    }
    .count {
      background-color: #fff;
      text-align: center;
      margin: -40px 15px 0;
      border-radius: 10px;
      /*height: 1.5rem;*/
      .weui-grids:before {
        content: none!important;
      }
      .weui-grids:after {
        content: none!important;
      }
      .weui-grid:after {
        content: none!important;
      }
      .weui-grid:last-child:before {
        content: none!important;
      }
      .money{
        font-size: 0.4rem;
        font-weight: bold;
      }
      .title{
        font-size: 0.28rem;
        color: #999999;
      }
      a{
        padding: 17px 0px;
      }
    }
    .menu {
      div{
        font-size: 0.28rem;
      }
      .weui-cells{
        padding: 0 10px;
      }
      .weui-cell__hd {
        line-height: 1!important;
        font-size: 0;
      }
      .icon-personal{
        img{
          width: 0.28rem;
          height: 0.28rem;
        }
      }
    }
    .btn-bg{
      /*background: #fff;*/
      width: 100%;
      text-align: center;
      .per-exit{
        display: inline-block;
        width: 6.7rem;
        height: 0.82rem;
        background: #fb5555;
        border: 0px;
        border-radius: 3px;
        margin-top: 10px;
        font-size: 0.28rem;
        color: #fff;

      }
    }
  }
</style>
